<!--
 * @Description: 实时监测
 * @Author: charles
 * @Date: 2021-12-14 22:13:44
 * @LastEditors: HeAo
 * @LastEditTime: 2021-12-21 11:55:17
-->
<template>
  <div>
    <div class="container">
      <div class="left">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="right">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane
            v-for="(item, index) in type"
            :key="index"
            :label="item"
            :name="item"
          />
          <div ref="chartContainer" style="height: 300px" />
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from '@/utils/request'
import { Area } from '@antv/g2plot'
import moment from 'moment'
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      activeName: 'tsp',
      type: ['tsp', 'pm10', 'pm2.5', '温度', '湿度'],
      monitor: [],
      params: {}
    }
  },
  computed: {
    chartData() {
      return this.monitor.map((item) => {
        return {
          Date: moment(item.insert_time).format('MM-DD hh:mm'),
          [this.activeName]: item[this.activeName]
        }
      })
    }
  },
  created() {
    // 工程设备树方法的调用
    this.findEngineerDeviceTree()
  },
  methods: {
    // 查询实时数据
    findRealTimeData() {},
    // 树形节点点击事件
    handleNodeClick(node) {
      if (node.engineer_id) {
        // 点击了数据
        // 点击了设备
        this.$set(this.params, 'engineer_id', node.engineer_id)
        this.$set(this.params, 'device_id', node.id)
        // 重组参数
        const params = {
          page: 1,
          pageSize: 100,
          engineer_id: node.engineer_id,
          device_id: node.id
        }
        // 请求实时数据
        get('/monitor/pageQuery', params).then((res) => {
          this.monitor = res.data.list
          // 初始化图表
          this.initChart()
        })
      }
    },
    // 查询工程设备树
    findEngineerDeviceTree() {
      get('/engineer/findEngineerDeviceTree').then((res) => {
        this.data = res.data
      })
    },
    // tab点击函数
    handleTabClick() {
      console.log(this.chartData)
      this.initChart()
    },
    // 初始化图表
    initChart() {
      const area = new Area(this.$refs['chartContainer'], {
        data: this.chartData,
        xField: 'Date',
        yField: this.activeName,
        annotations: [
          {
            type: 'text',
            position: ['min', 'median'],
            content: '中位数',
            offsetY: -4,
            style: {
              textBaseline: 'bottom'
            }
          },
          {
            type: 'line',
            start: ['min', 'median'],
            end: ['max', 'median'],
            style: {
              stroke: 'red',
              lineDash: [2, 2]
            }
          }
        ]
      })
      area.render()
    }
  }
}
</script>
<style scoped>
.container {
  display: flex;
  height: 100%;
}
.left {
  width: 250px;
  height: 100%;
  border-right: 1px solid #ededed;
}
.right {
  flex: 1;
  height: 100%;
  padding-left: 1em;
}
</style>
